<template>
  <div ref="mainCon" class="container">
    <topTitle :titleText="titleText"></topTitle>
    <div class="mainCon">
      <el-row class="toolbar searchInputWidth" style="padding-bottom: 0">
        <el-form :inline="true" :model="filterField" ref="searchConditions">
          <el-col :lg="8" :xl="6">
            <el-form-item label="巡查日期" class="row-padding-bottom">
              <timeSelection
                @getStartTimeValue="getStartTimeValue"
                @getEndTimeValue="getEndTimeValue"
              ></timeSelection>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xl="6">
            <el-form-item label="整改状态" class="row-padding-bottom">
              <el-select
                v-model="filterField.rectificationStatus"
                filterable
                placeholder="请选择"
                clearable
                :popper-append-to-body="false"
              >
                <el-option
                  v-for="(item, index) in statusArr"
                  :key="index"
                  :label="item.statusDesc"
                  :value="item.status"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-form-item>
            <!-- <el-button
                            type="primary"
                            icon="icon iconfont iconchazhao1"
                            @click="searchList"
                            class="commonBtn"
                        ></el-button> -->
            <el-button
              type="primary"
              icon="icon iconfont iconchazhao1"
              @click="searchList"
              class="searchBtn"
            >
              <span>搜索</span>
            </el-button>
          </el-form-item>
        </el-form>
      </el-row>
      <div class="spacing"></div>
      <div
        ref="tableBox"
        :class="hiddleToolBar ? 'tableBoxCur tableBox' : 'tableBoxCur'"
      >
        <el-table
          ref="tableBox1"
          :max-height="tableHeight"
          :data="tableList"
          v-loading="loading"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          highlight-current-row
          stripe
          style="border: 1px solid #dfe6ec"
          @sort-change="sortChange"
        >
          <el-table-column
            label="序号"
            type="index"
            width="80"
            align="center"
          ></el-table-column>
          <!-- <el-table-column
                    v-if="userType === 'QY'"
                    prop="companyName"
                    label="企业名称"
                    align="left"
                    min-width="30%"
                ></el-table-column> -->
          <el-table-column
            label="企业名称"
            min-width="20%"
            v-if="userType === 'QY'"
          >
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.companyName"
                :columnName="'companyName'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column
            label="项目名称"
            min-width="20%"
            v-if="userType === 'XM'"
          >
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.projectName"
                :columnName="'projectName'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column
            prop="inspectionDate"
            label="巡查日期"
            align="center"
            :formatter="formatTd"
            min-width="20%"
            sortable="custom"
          ></el-table-column>
          <el-table-column
            prop="rectificationStatusDesc"
            label="整改状态"
            align="center"
            :formatter="formatTd"
            min-width="20%"
          ></el-table-column>
          <el-table-column
            label="操作"
            align="left"
            :formatter="formatTd"
            width="160"
          >
            <template slot-scope="scope">
              <el-link
                type="primary"
                v-if="isShowDetail"
                @click="toDetail(scope.row, 'detail')"
                >详情</el-link
              >
              <el-link
                type="primary"
                v-if="
                  isShowUpdate &&
                  isShowDetail &&
                  (scope.row.rectificationStatus === 'PENDING_RECTIFICATION' ||
                    scope.row.rectificationStatus ===
                      'IN_PROCESS_RECTIFICATION')
                "
                @click="toDetail(scope.row, 'edit')"
                >处理整改</el-link
              >
              <span v-if="!isShowUpdate && !isShowDetail">--</span>
            </template>
          </el-table-column>
          <!-- 表格数据为空时，页面显示 -->
          <div slot="empty" v-show="isShow">
            <emptyTable emptyText="暂无相关数据"></emptyTable>
          </div>
        </el-table>
        <!-- getTableList为获取子组件的数据 -->
        <Pagination
          ref="pagination"
          @getList="getTableList"
          :filterField="filterField"
          :requestUrl="requestUrl"
          @getpageNo="getpageNo"
          @getpageSize="getpageSize"
        ></Pagination>
      </div>
    </div>
  </div>
</template>

<script>
import emptyTable from '@/components/publicCom/emptyTable'
import Pagination from '@/components/publicCom/pagination'
import scrollTable from '@/mixin/scrollTable.js'

export default {
  name: 'Inspection',
  mixins: [scrollTable],
  components: {
    emptyTable,
    Pagination,
  },
  props: {
    taskType: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      userType: '',
      titleText: '巡查列表',
      eventTypeId: '',
      statusArr: [
        {
          status: 'NO_RECTIFICATION_REQUIRED',
          statusDesc: '无需整改',
        },
        {
          status: 'PENDING_RECTIFICATION',
          statusDesc: '待整改',
        },
        {
          status: 'IN_PROCESS_RECTIFICATION',
          statusDesc: '整改中',
        },
        {
          status: 'COMPLETE_RECTIFICATION',
          statusDesc: '完成整改',
        },
      ],
      selectLevel: [],
      //表格数据
      tableList: [],
      requestUrl: '',
      //搜索条件
      filterField: {
        rectificationStatus: '',
        startDateStr: '',
        endDateStr: '',
        type: this.taskType,
      },
      pageSize: 20,
      pageNo: 1,
      isShow: false, //列表加载
      loading: false,
      isShowUpdate: false,
      isShowDetail: false,
    }
  },
  created() {
    let taskTypeStr = null
    taskTypeStr = this.taskType === 'DAILY' ? 'daily' : 'special'
    if (
      this.$store.state.userType === 'PROJECT_ADMINISTRATOR' ||
      this.$store.state.userType === 'LABOR_ADMINISTRATOR'
    ) {
      this.userType = 'XM'
      this.requestUrl = '/api-gov/ipqcjobProject/expand/ipqcProjectList' //项目
      Object.assign(this.filterField, {
        projectId: this.$store.state.projectId,
      })
      this.isShowDetail =
        this.$store.state.buttonLimitsArr.indexOf(
          taskTypeStr + 'InspectionXM:detail'
        ) > -1
      this.isShowUpdate =
        this.$store.state.buttonLimitsArr.indexOf(
          taskTypeStr + 'InspectionXM:update'
        ) > -1
    }
    if (this.$store.state.userType === 'COMPANY') {
      this.userType = 'QY'
      this.requestUrl = '/api-gov/ipqcjobCompany/expand/ipqcCompanyList' //企业
      Object.assign(this.filterField, {
        companyId: this.$store.state.companyId,
      })
      this.isShowDetail =
        this.$store.state.buttonLimitsArr.indexOf(
          taskTypeStr + 'InspectionQY:detail'
        ) > -1
      this.isShowUpdate =
        this.$store.state.buttonLimitsArr.indexOf(
          taskTypeStr + 'InspectionQY:update'
        ) > -1
    }
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData()
    })
  },
  activated() {
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData(this.pageNo, this.pageSize)
    })
  },
  methods: {
    getpageSize(val) {
      this.pageSize = val
    },
    getpageNo(val) {
      this.pageNo = val
    },
    getStartTimeValue(val) {
      if (val) {
        this.filterField.startDateStr = val
      } else {
        this.filterField.startDateStr = ''
      }
    },
    getEndTimeValue(val) {
      if (val) {
        this.filterField.endDateStr = val
      } else {
        this.filterField.endDateStr = ''
      }
    },
    toDetail(row, type) {
      this.$router.push({
        path: '/home/patrol/rectificationDetail',
        name: 'rectificationDetail',
        query: {
          id: row.id,
          type,
          taskType: this.taskType,
        },
      })
      let url = '/home/patrol/dailyInspection'
      if (this.taskType === 'SPECIAL') {
        url = '/home/patrol/specialInspection'
      }
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: url,
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    getTableList(data) {
      this.tableList = data
      this.loading = false
      if (this.tableList.length < 1) {
        this.isShow = true
      }
    },
    // 搜索
    searchList() {
      this.$refs.pagination.getTableListData()
    },
  },
}
</script>

<style lang="less" scoped>
.mainCon {
  top: 213px;
}
/deep/ .el-form-item__label {
  font-size: 14px;
  color: #333333;
}
@import '../../../static/css/filterArea.less';
</style>
